<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
		<title> 轮播-兵兵有你模板</title>
		<meta name="description" content="轮播-特效综合，自封banner插件应用检测">
		<meta name="keywords" content="轮播，插件，封装">

		<link rel='shortcut icon' type='images/x-icon' href='bitbug_favicon.ico' />
		<link rel="stylesheet" href="css/bb.css">
		<link href="css/index.css" rel="stylesheet">
	</head>
	<body>
		<div id="wrap">
			<!-- 无缝轮播 -->
			<p class="mar-t30 t-a-c">无缝轮播</p>
			<div id="banner1" class="banner pos-r mar-auto mar-t30">
				<div class="pic w-100 h-100">
					<ul class="w-100 h-100">
						<li><a href=""><img src="images/1.jpg" alt=""></a></li>
						<li><a href=""><img src="images/2.jpg" alt=""></a></li>
						<li><a href=""><img src="images/3.jpg" alt=""></a></li>
						<li><a href=""><img src="images/4.jpg" alt=""></a></li>
						<li><a href=""><img src="images/5.jpg" alt=""></a></li>
						<li><a href=""><img src="images/6.jpg" alt=""></a></li>
						<li><a href=""><img src="images/7.jpg" alt=""></a></li>
						<li><a href=""><img src="images/8.jpg" alt=""></a></li>
					</ul>
				</div>

				<div class="tab pos-a">
					<ul class="clearfix pad-l10 w-100 h-100">
						<li></li>
						<li></li>
						<li></li>
						<li></li>
						<li></li>
						<li></li>
						<li></li>
						<li></li>
					</ul>
				</div>

				<div class="btn">
					<div class="left pos-a l"><</div>
					<div class="right pos-a r">></div>
				</div>
			</div>

			<!-- 不 无缝轮播 -->
			<p class="mar-t30 t-a-c">不 无缝轮播</p>
			<div id="banner2" class="banner pos-r mar-auto mar-t30">
				<div class="pic w-100 h-100">
					<ul class="w-100 h-100">
						<li><a href=""><img src="images/1.jpg" alt=""></a></li>
						<li><a href=""><img src="images/2.jpg" alt=""></a></li>
						<li><a href=""><img src="images/3.jpg" alt=""></a></li>
						<li><a href=""><img src="images/4.jpg" alt=""></a></li>
						<li><a href=""><img src="images/5.jpg" alt=""></a></li>
						<li><a href=""><img src="images/6.jpg" alt=""></a></li>
						<li><a href=""><img src="images/7.jpg" alt=""></a></li>
						<li><a href=""><img src="images/8.jpg" alt=""></a></li>
					</ul>
				</div>

				<div class="tab pos-a">
					<ul class="clearfix pad-l10 w-100 h-100">
						<li></li>
						<li></li>
						<li></li>
						<li></li>
						<li></li>
						<li></li>
						<li></li>
						<li></li>
					</ul>
				</div>

				<div class="btn">
					<div class="left pos-a l"><</div>
					<div class="right pos-a r">></div>
				</div>
			</div>

			<!-- 淡入淡出 -->
			<p class="mar-t30 t-a-c">淡入淡出</p>
			<div id="banner3" class="banner pos-r mar-auto mar-t30">
				<div class="pic w-100 h-100">
					<ul class="w-100 h-100">
						<li><a href=""><img src="images/1.jpg" alt=""></a></li>
						<li><a href=""><img src="images/2.jpg" alt=""></a></li>
						<li><a href=""><img src="images/3.jpg" alt=""></a></li>
						<li><a href=""><img src="images/4.jpg" alt=""></a></li>
						<li><a href=""><img src="images/5.jpg" alt=""></a></li>
						<li><a href=""><img src="images/6.jpg" alt=""></a></li>
						<li><a href=""><img src="images/7.jpg" alt=""></a></li>
						<li><a href=""><img src="images/8.jpg" alt=""></a></li>
					</ul>
				</div>

				<div class="tab pos-a">
					<ul class="clearfix pad-l10 w-100 h-100">
						<li></li>
						<li></li>
						<li></li>
						<li></li>
						<li></li>
						<li></li>
						<li></li>
						<li></li>
					</ul>
				</div>

				<div class="btn">
					<div class="left pos-a l"><</div>
					<div class="right pos-a r">></div>
				</div>
			</div>
		</div>
	    

	    <script src="js/jquery-3.3.1.js"></script>
	    <script src="js/jq-bb.js"></script>
		<script src="js/index.js"></script>
	</body>
</html>